<template>
	<view :style="{ '--color': vuex_config.themeColor1 }">
		<template v-if="detailForm.pk_id > 0">
			<sww-swipe :list="swipeList" indicatorDots autoplay></sww-swipe>
			<view class="head">
				<view class="name">{{ detailForm.name }}</view>
				<view class="head_bot">
					<!-- 				<view class="time">{{ detailForm.start_date }}</view>
				<view class="line">|</view> -->
					<view class="address">{{ detailForm.address }}</view>
					<!-- <view class="browse">126人浏览</view> -->
				</view>
				<view class="r_line"></view>
				<view class="price_main">
					<view class="price_box">
						<template v-if="detailForm.price > 0">
							<text class="sign">￥</text>
							<text class="num">{{ detailForm.price }}</text>
						</template>
						<view class="no_num" v-else>免费</view>
					</view>
					<!-- 判断时间 、状态 、报名人数上限num -->
					<view class="part_btn disabled" v-if="partErr">{{ partErr }}</view>
					<view class="part_btn" v-else @click="goPart">
						{{ detailForm.meeting_users_id > 0 ? '查看报名信息' : '参与活动' }}
					</view>
				</view>
			</view>
			<view class="sponsor">
				<view class="main_title">活动主办方</view>
				<view class="sponsor_cont">
					<view class="loog">
						<image :src="detailForm.sponsor_logo"></image>
					</view>
					<view class="cont">
						<view class="sponsor_name">{{ detailForm.sponsor }}</view>
						<view class="spon_txt u-line-2">{{ detailForm.synopsis }}</view>
						<view class="btn_box">
							<view class="btn" @click="toMeetList">更多活动</view>
							<view class="btn" @click="toPhone">联系主办方</view>
						</view>
					</view>
				</view>
			</view>
			<view class="detail" v-if="detailForm.details ? true : false">
				<view class="main_title">活动详情</view>
				<view class="cont">
					<u-parse :html="detailForm.details"></u-parse>
					<view class="sign_post">
						<view class="sign_relative"></view>
						<view class="sign_box">
							<view class="sign" @click="seeDetail">查看更多</view>
						</view>
					</view>
				</view>
			</view>
			<view class="map_main" v-if="markers[0] ? true : false">
				<map style="width: 100%; height:370rpx;" :latitude="markers[0].latitude"
					:longitude="markers[0].longitude" :markers="markers" :enable-scroll="false"
					:enable-zoom="false"></map>
				<view class="map_sign">
					<view class="row iconfont iconfont-e620"></view>
					<view class="map_ti" @click="openLocation">开始导航</view>
				</view>
			</view>
			<!-- <view class="report_view"> -->
			<view class="report">
				<view class="report_item">
					<view class="report_si iconfont iconfont-e60a"></view>
					<view>
						<view class="report_cont">
							<view class="report_title">报名时间</view>
							<view class="report_time">{{ detailForm.start_date }}~{{ detailForm.end_date }}</view>
						</view>
						<view class="report_cont" v-if="detailForm.start_signin && detailForm.end_signin">
							<view class="report_title report_top">签到时间</view>
							<view class="report_time">{{ detailForm.start_signin }}~{{ detailForm.end_signin }}</view>
						</view>
					</view>
				</view>
				<view class="report_item">
					<view class="report_si iconfont iconfont-e657"></view>
					<view class="report_cont">
						<view class="report_title">活动举办地点</view>
						<view class="report_time">{{ detailForm.address }}</view>
					</view>
				</view>
			</view>
			<view class="part_list" v-if="detailForm.display_info == 1">
				<part-list :dataList="meeting_users"></part-list>
			</view>

			<!-- </view> -->

			<view class="phone_btn" v-if="detailForm.signTime == 3">
				<view class="word" @click="gophone">手机号签到</view>
			</view>
		</template>

		<sww-login></sww-login>
	</view>
</template>

<script>
	import {
		isBefore,
		isAfter,
		formatDate
	} from '@/utils/moment/index.js';
	import partList from '../components/partList.vue';
	export default {
		props: {
			meetId: {
				type: Number,
				default: 0
			}
		},
		components: {
			'part-list': partList
		},
		computed: {
			partErr() {
				// if(this.detailForm.meeting_users_id > 0){
				// 	return '已报名'
				// }else
				if (this.detailForm.statusTime != 3) {
					return this.detailForm.statusTime == 1 ? '活动未开始' : '活动已结束';
				} else if (this.detailForm.status != 1) {
					return '活动已关闭';
				} else if (this.detailForm.num <= this.detailForm.meeting_users_count) {
					return '名额已满';
				} else {
					return '';
				}
			}
		},
		data() {
			return {
				detailForm: {},
				swipeList: [{
					img: 'http://klwl-file.oss-cn-shenzhen.aliyuncs.com/202110/gxhpngry/52405463517863.jpg'
				}], //轮播
				markers: [],
				meeting_users: [],
			};
		},
		mounted() {
			this.$login('init', null, 'init').then(() => {
				this.init();
			})
		},

		methods: {
			init() {
				this.$loading();
				this.$resPost('GetMeetingInfo', {
					pk_id: this.meetId
				}).then(({
					data
				}) => {
					let swipeList = [];
					if (data.img) {
						data.img.split(',').forEach(item => {
							swipeList.push({
								img: item
							});
						});
					}
					this.swipeList = [].concat(swipeList);

					if (data.coordinate) {
						let arr = data.coordinate.split(',');
						this.markers = [{
							latitude: arr[0] || 0,
							longitude: arr[1] || 0,
							width: 30,
							height: 30
						}];
					}
					let current_date = new Date();
					let statusTime = 3; // 1:未开始 2：已结束 3:报名进行中
					let signTime = 3; // 1:未到签到时间 2：签到时间结束 3：正在签到中...
					if (isBefore(current_date, data.start_date)) {
						statusTime = 1;
					} else if (isAfter(current_date, data.end_date)) {
						statusTime = 2;
					}
					if (isBefore(current_date, data.start_signin)) {
						signTime = 1;
					} else if (isAfter(current_date, data.end_signin)) {
						signTime = 2;
					}
					this.meeting_users = data.meeting_users || [];
					this.detailForm = {
						meeting_users: [],
						...data,
						statusTime: statusTime,
						signTime: signTime,
						start_date: formatDate(data.start_date, 'YYYY-MM-DD HH:mm:ss'),
						end_date: formatDate(data.end_date, 'YYYY-MM-DD HH:mm:ss'),
						start_signin: formatDate(data.start_signin, 'YYYY-MM-DD HH:mm:ss'),
						end_signin: formatDate(data.end_signin, 'YYYY-MM-DD HH:mm:ss')
					};
					this.$emit('getShare', {
						...data
					});
					this.$hide();
				});
			},
			seeDetail() {
				this.$linkTo('/package/meet/detailEditor/index');
			},
			// 参加活动
			goPart() {
				this.$login('init').then(() => {
					let str = `/package/meet/partIn/index?id=${this.meetId}`;
					this.$linkTo(str);
				});
			},
			toMeetList() {
				this.$linkTo('/package/meet/meetSearch/index');
			},
			toPhone() {
				this.$linkTo('/package/meet/sponsor/index');
			},
			openLocation() {
				let obj = {
					// #ifdef MP-ALIPAY
					name: this.detailForm.address,
					address: this.detailForm.address
					// #endif
				};
				uni.openLocation({
					latitude: Number(this.markers[0].latitude),
					longitude: Number(this.markers[0].longitude),
					...obj
				});
			},
			gophone() {
				this.$login('init').then(() => {
					let str = `/package/meet/partIn/index?id=${this.meetId}`;
					str += `&userPhone=1`
					this.$linkTo(str);
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.head {
		padding: 0 24rpx;
		background-color: #fff;

		.name {
			padding: 30rpx 0 18rpx;
			color: #3b3a42;
			font-size: 36rpx;
			font-weight: bold;
		}

		.head_bot {
			display: flex;
			align-items: center;
			color: #626262;
			padding-bottom: 28rpx;

			.line {
				margin: 0 12rpx;
			}

			.browse {
				margin-left: 30rpx;
			}
		}

		.r_line {
			border-top: 2rpx dashed #e0e0e0;
		}

		.price_main {
			padding: 30rpx 0;
			display: flex;
			align-items: center;

			.price_box {
				flex: 1;
				overflow: hidden;
				color: var(--color);
				padding-left: 10rpx;

				.num {
					font-size: 42rpx;
				}

				.no_num {
					font-size: 34rpx;
				}
			}

			.part_btn {
				font-size: 34rpx;
				font-weight: bold;
				width: 280rpx;
				line-height: 94rpx;
				text-align: center;
				border-radius: 50rpx;
				background-color: var(--color);
				color: #fff;

				&.disabled {
					background-color: #a9aaac;
				}
			}
		}
	}

	.main_title {
		font-size: 36rpx;
		font-weight: bold;
		padding: 50rpx 0 30rpx;
	}

	.sponsor {
		background-color: #fff;
		margin-top: 18rpx;
		padding: 0 26rpx 36rpx;

		.sponsor_cont {
			display: flex;

			.loog {
				margin-left: 20rpx;
				width: 100rpx;
				height: 100rpx;
				margin-right: 40rpx;
			}

			.cont {
				flex: 1;
				overflow: hidden;

				.sponsor_name {
					color: #303135;
					font-size: 36rpx;
					font-weight: bold;
				}

				.spon_txt {
					color: #636363;
					line-height: 36rpx;
					font-size: 26rpx;
					margin-top: 4rpx;
				}

				.btn_box {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					.btn {
						background-color: #fd1568;
						color: #ffc0e5;
						font-size: 28rpx;
						margin-right: 26rpx;
						line-height: 56rpx;
						width: 186rpx;
						text-align: center;
						border-radius: 40rpx;
					}
				}
			}
		}
	}

	.detail {
		background-color: #fff;
		margin-top: 18rpx;
		padding: 0 26rpx;
	}

	.cont {
		max-height: 800rpx;
		overflow: hidden;
		position: relative;

		.sign_post {
			position: absolute;
			top: 724rpx; // 800 - 76
			left: 0;
			width: 100%;

			.sign_relative {
				height: 30rpx;
				background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0), #fff);
			}

			.sign_box {
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 46rpx;

				.sign {
					background-color: var(--color);
					color: #fff;
					width: 176rpx;
					line-height: 50rpx;
					border-radius: 40rpx;
					text-align: center;
				}
			}
		}
	}

	.map_main {
		position: relative;
		background-color: #fff;
		padding-top: 40rpx;

		.map_sign {
			position: relative;
			display: flex;
			background-color: #fff;
			position: absolute;
			height: 60rpx;
			border-radius: 50rpx;
			padding: 0 26rpx;
			z-index: 100;
			bottom: 118rpx;
			right: 26rpx;
			align-items: center;

			.row {
				color: var(--color);
				margin-right: 4rpx;
			}

			.map_ti {
				color: #993057;
			}
		}
	}

	.report {
		background-color: #fff;
		position: relative;
		position: relative;
		padding-bottom: 40rpx;
		border-radius: 22rpx;
		margin: -96rpx 26rpx 30rpx;
		box-shadow: 2rpx 2rpx 10rpx #e9e9eb;

		.report_item {
			padding: 50rpx 20rpx 0 36rpx;
			display: flex;
			align-items: flex-start;

			.report_si {
				margin-right: 10rpx;
				line-height: 48rpx;
				font-size: 36rpx;
				color: #9d9ca1;
			}

			.report_cont {
				flex: 1;
				overflow: hidden;

				.report_title {
					line-height: 48rpx;
					font-weight: bold;
					font-size: 36rpx;

					&.report_top {
						margin-top: 20rpx;
					}
				}

				.report_time {
					color: #5e605f;
					margin-top: 10rpx;
				}
			}
		}
	}

	.part_list {
		margin: 0 24rpx 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.phone_btn {
		display: flex;
		justify-content: center;
		padding: 30rpx 0;

		.word {
			text-align: center;
			color: #fff;
			width: 150px;
			margin: 0 auto;
			border-radius: 25px;
			line-height: 40px;
			height: 40px;
			letter-spacing: 10px;
			text-indent: 10px;
			background: var(--color)
		}
	}
</style>
